<script setup lang="ts">
import {reactive, toRefs, ref, provide,inject, nextTick} from 'vue'
import { Search,ChatRound,User } from '@element-plus/icons-vue'
import Right from './Right.vue'
import AI from '../../AI/AI.js' 
import Adress from './Address/main.vue'
import AdressDetail from './Address/detail.vue' 

const state = reactive({
  fits: ['cover'],
  fit: 'cover',
  url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
})

const { fits, url } = toRefs(state)
const peopleList = ref([])
const isActive = ref(-1)
const isFocus = ref(-1)
const currentPerson = ref(peopleList.value[0])
provide('chatDetailInfo', {currentPerson,sendMsg})
provide('newMsg',{newMsg})
const ai = inject('$ai')
// 1 聊天 2 通讯录
let local = ref(1)
//切换页签
function changeLocal(curLocal){
    local.value = curLocal
}
function chatDetail(people){
    isActive.value = people.id 
    currentPerson.value = people
    nextTick(() => {
        let div = document.getElementById('data-list-content')
        div.scrollTop = div.scrollHeight
      })
}
function focusDetail(index) {
    isFocus.value = index
}
//新建消息
function newMsg(friend){
    let date = new Date().getTime()
    let time = new Date(date)
    friend.time = time.getHours() + ":" +time.getMinutes();
    friend.chatList = []
    console.log('新建消息',friend)
    local.value = 1
    chatDetail(friend)
    let flag = peopleList.value.find(function(value){
        if (value.id == friend.id) {
            return value
        }
    })
    // 如果不包含则新增聊天
    if(!flag) {
        peopleList.value.push(friend)
    }

}
//
function sendMsg(people,text){
    //更新自己
    let chat = {
        type:0,
        mess:text
    }
    console.log('callbackP:', people)
    console.log('callbackMsg:', text)
    people.chatList.push(chat)
    console.log("ai-----" + ai)
    // AI 自动回复 begin
    if (ai) {
        text = AI.ai(text)
        let rechat = {
                    type:1,
                    mess:text
                    }
        people.chatList.push(rechat)
    }
    
    nextTick(() => {
        let div = document.getElementById('data-list-content')
        div.scrollTop = div.scrollHeight
      })
}
</script>
<template>
    <div class="left-main left-color chat-left">
        <div>
            <div class="left-menu">
                <div class="demo-fit"> 
                    <div v-for="fit in fits" :key="fit" class="block">
                    <el-avatar shape="square" :size="35" :fit="fit" :src="url" />
                    </div>
                </div>
                <div class="left-icon">
                    <el-icon :size="20" color="#409EFC" @click="changeLocal(1)"><ChatRound /></el-icon>
                </div>
                <div class="left-icon">
                    <el-icon :size="20" color="#409EFC" @click="changeLocal(2)"><User /></el-icon>
                </div>
            </div>
            <div class="right-main1">
                    <el-input
                    class="w-20 m-2 flex-s"
                    size="small"
                    placeholder="搜索"
                    :prefix-icon="Search"
                    />      
                    <div v-if="local == 1" v-for="people in peopleList" :key="people.id">
                        <div class="left_peoples" :class="{active: isActive===people.id, detail_focus: (isFocus===people.id)&&(isActive!=people.id)}" @mouseover="focusDetail(people.id)" @mouseout="focusDetail(-1)"  @click="chatDetail(people)">
                            <div class="padding-left-10 float-left">
                                <span>
                                    <el-avatar shape="square" :size="40" fit="cover" :src="people.headPic" />
                                </span>
                            </div>
                            <div class="p_title">
                                <span class="t_name">{{people.name}}</span>
                                <span class="t_time">{{people.time}}</span>
                            </div>
                            <div class="p_mess">
                                <span v-if="!(people.chatList.length==0)">{{people.chatList[people.chatList.length-1].mess}}</span>
                            </div>
                        </div>   
                    </div>
                    <!--通讯录begin-->
                    <div v-if="local == 2">
                        <Adress></Adress>
                    </div>
                    <!--通讯录end-->
            </div>
        </div>
    </div>
    <div v-if="local==1" class="chat-right">
      <Right></Right>
    </div>
    <div v-if="local==2">
        <AdressDetail></AdressDetail>
    </div>
</template>

<style scoped>
.chat-left{
    float: left;
    border-right: 1px solid rgb(222,222,222);
}
/* 对话框UI begin */
.active{
    background-color: rgb(198,197,197);
}
.detail_focus{
    background-color: rgb(222,222,222);
}
.left_peoples {
    height: 50px;
}
.t_time{
    margin-right: 10px;
    color: rgb(153, 153, 153);
    font-size: 13px;
    float: right;
}
.t_name {
    padding-left: 10px;
    font-size: 14px;
}
.p_mess{
    color: rgb(153, 153, 153);
    font-size: 12px;
    margin-top: 3px;
}
.p_mess span {
    padding-left: 10px;
}
/* 对话框UI end */
.left-icon {
    text-align: center;
    padding-top: 20px;
}
.flex-s {
    background-color: rgb(247, 247, 247);
    display: block;
    padding-left: 30px;
    padding-top: 15px;
    height: 60px;
    margin-left: 50px;
}
.right-main1 {
    
    height: 100%;
}
.demo-fit {
  text-align: center;
  justify-content: space-between;
  padding-top: 35px;
}
.left-color {
    background-color: rgb(245, 245, 245);
}
.left-main {
    width: 300px;
    min-height: 600px;
    height: 100%;
    overflow: hidden;
}
.left-menu {
    float: left;
    background-color: rgb(46, 46, 46);
    width: 50px;
    height: 600px;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>